<template>
  <div class="bg">
    <el-row>
      <el-col :span="24">
        <div class="newTask">
          <i class="el-icon-goods"></i>
          <div class="newName">每日任务</div>
        </div>
      </el-col>
    </el-row>
    <!-- 表格展示 -->
    <el-card class="card">
      <el-table :data="tableData" :border="false" style="width: 100%" @cell-dblclick="tabClick">
        <el-table-column type="index" width="100" label="序号"></el-table-column>
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column prop="taskDesc" label="任务条件">
          <!-- <template slot-scope="scope">
            <span>{{ status(scope.row.taskDetailsType) }}</span>
          </template>-->
        </el-table-column>
        <el-table-column prop="taskGoldReward" label="金币奖励">
          <template slot-scope="scope">
            <span v-if="scope.row.taskId==tabClickIndex ">
              <el-input
                  size="small"
                  v-model="scope.row.taskGoldReward"
                  @change="chanageGold"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  maxlength="7"
              ></el-input>
            </span>
            <span v-else>
              {{scope.row.taskGoldReward}}&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-edit"></i>金币
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="taskReward" label="口粮奖励">
          <template slot-scope="scope">
            <span v-if="scope.row.taskId==tabClickIndex">
              <el-input
                size="small"
                v-model="scope.row.taskReward"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                @change="chanageNum"
                maxlength="6"
              ></el-input>
            </span>
            <span v-else>
              {{scope.row.taskReward}}&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-edit"></i>口粮
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="primary"
              size="small"
              v-if="scope.row.taskId==tabClickIndex"
            >保存</el-button>
            <el-button v-else type="primary" size="small" @click="compile(scope.row)">编辑</el-button>
            <el-button
              @click="forbidden(scope.row)"
              type="danger"
              size="small"
            >{{scope.row.taskStatus==1?'禁用':'启用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { export2Excel } from "@/components/commom.js";
import searchTime from "@/components/searchTime";
export default {
  components: {
    searchTime
  },
  data() {
    return {
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      taskRewardNum: 0, //修改奖励
      tabClickIndex: 0, //选中ID
      tabClickLabel: "" //选中参数
    };
  },
  mounted() {
    this.newTasklist();
  },
  methods: {
    // 获取新手任务列表
    newTasklist() {
      let param = {
        size: 10,
        current: 1,
        type: 2
      };
      this.$http.article.newTask(param).then(res => {
        this.tableData = res.result.records;
        console.log("获取新手任务", res);
      });
    },
    // 点击编辑
    compile(val) {
      console.log("编辑详情", val);
      this.tabClickIndex = val.taskId;
      //点击编辑获取详情
      let param = {
        petTaskId: val.taskId,
        taskType: 2 //任务类型（1 新手任务 2 每日任务）
      };
      this.$http.article.getnewTask(param).then(res => {
        this.taskRewardNum = res.result.taskReward;
        console.log("获取新手任务详情", res);
      });
    },
    // 点击修改状态
    tabClick(row, column, cell, event) {
      console.log(row, "row");
      console.log(column, "column");
      switch (column.label) {
        case "任务奖励":
          this.tabClickIndex = row.taskId;
          this.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    // 禁用状态
    forbidden(val) {
      console.log(val);
      let taskStatusMessage = "";
      if (val.taskStatus == 1) {
        taskStatusMessage = "禁用";
      } else {
        taskStatusMessage = "启用";
      }
      this.$confirm(`此操作将${taskStatusMessage}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let taskStatus = 0;
          if (val.taskStatus == 1) {
            taskStatus = 2;
          } else {
            taskStatus = 1;
          }
          let param = {
            taskId: val.taskId,
            taskStatus: taskStatus
          };
          this.$http.article.upadtenewTask(param).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.newTasklist();
            }
            console.log("res", res);
          });
        })
        .catch(() => {
          this.$message.info("取消");
        });
    },
    // 修改状态
    handleClick(val) {
      this.tabClickIndex = null;
      this.tabClickLabel = "";
      let param = {
        taskId: val.taskId,
        taskReward: this.taskRewardNum,
        taskGoldReward: this.taskGoldReward
      };
      this.$http.article.upadtenewTask(param).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.newTasklist();
        }
        console.log("res", res);
      });
    },
    // change事件
    chanageNum(val) {
      this.taskRewardNum = val;
      console.log("val", val);
    },
    // change事件
    chanageGold(val) {
      this.taskGoldReward = val;
      console.log("val", val);
    },

    //任务状态
    status(val) {
      switch (val) {
        case 6:
          return "每日签到";
          break;
        case 7:
          return "消费三次可领取";
          break;
        case 8:
          return "分享朋友圈可领取 ";
          break;
        case 9:
          return "发布新动态可领取";
          break;
      }
    },
    // 搜索框
    userSearch(val) {
      console.log("搜索框", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.newTask {
  display: flex;
  align-items: center;
  margin: 30px 0px 0px 3%;
  .el-icon-goods {
    font-size: 30px;
    color: #23a9f2;
  }
  .newName {
    margin-left: 30px;
    font-size: 20px;
  }
}

.clearfix {
  padding-bottom: 20px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  overflow: hidden;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>